<app-page-header [pageHeaderInfo]="pageHeaderInfo" />
<div class="normal-table-wrap">
  <nz-card class="m-b-10" nzTitle="Message">
    <button class="m-b-8" nz-button nzBlock [nzType]="'dashed'" (click)="addForm()">
      <i nz-icon nzType="plus"></i>
      <span>添加</span>
    </button>

    <form nz-form [formGroup]="validateForm">
      <ng-container formArrayName="formArray">
        @for (item of valuesArray.controls; track item; let groupIndex = $index) {
          <div class="full-with m-b-20" nz-card-grid nz-row [formGroupName]="groupIndex">
            <nz-form-item nz-col [nzSpan]="20">
              <nz-form-label [nzSpan]="8">Detail</nz-form-label>
              <nz-form-control [nzErrorTip]="combineTpl" [nzSpan]="22">
                <input id="detail" class="full-with" formControlName="detail" nz-input placeholder="项目名称" />
              </nz-form-control>
            </nz-form-item>

            <nz-form-item nz-col [nzSpan]="4">
              <button nz-button [nzGhost]="true" [nzType]="'primary'" (click)="del(groupIndex)">
                <i nz-icon nzType="delete"></i>
                移除
              </button>
            </nz-form-item>
          </div>
        }
      </ng-container>
    </form>

    <button class="m-b-8" nz-button nzBlock [nzType]="'dashed'" (click)="submitForm()">
      <i nz-icon nzType="plus"></i>
      <span>提交(查看控制台)</span>
    </button>
    <button class="m-b-8" nz-button nzBlock [nzType]="'dashed'" (click)="updateFormItem()">
      <i nz-icon nzType="plus"></i>
      <span>修改索引为0的input(查看控制台)</span>
    </button>
    <button class="m-b-8" nz-button nzBlock [nzType]="'dashed'" (click)="add2form()">
      <i nz-icon nzType="plus"></i>
      <span>新增但是不触发valueChange(查看控制台)</span>
    </button>

    <ng-template #combineTpl let-control>
      @if (control.hasError('message')) {
        {{ control.errors.message }}
      }
      @if (control.hasError('required')) {
        必填项
      }
    </ng-template>
  </nz-card>

  <nz-card class="m-b-10" nzTitle="Message">
    <div class="task-head" nz-row nzAlign="middle" nzJustify="space-between">
      <div class="text-center" nz-col nzSpan="7">
        <div class="task-head-title m-b-5" nz-typography nzType="secondary">我的待办</div>
        <p>2个任务</p>
      </div>
      <div>
        <nz-divider class="divider" nzType="vertical"></nz-divider>
      </div>
      <div class="text-center" nz-col nzSpan="7">
        <div class="m-b-5" nz-typography nzType="secondary">已逾期任务数</div>
        <p>1个任务</p>
      </div>
      <div class="center">
        <nz-divider class="divider" nzType="vertical"></nz-divider>
      </div>
      <div class="text-center" nz-col nzSpan="7">
        <div class="m-b-5" nz-typography nzType="secondary">进行中任务数</div>
        <p>1个任务</p>
      </div>
    </div>
    <nz-divider></nz-divider>
    <div class="space-between">
      <h3 class="sp-18">任务列表</h3>
      <div>
        <nz-radio-group class="m-r-15" [ngModel]="taskState">
          <label nz-radio-button [nzValue]="taskStateSearchEnum.All">
            <span>全部</span>
          </label>
          <label nz-radio-button [nzValue]="taskStateSearchEnum.NoStarted">
            <span>未开始</span>
          </label>
          <label nz-radio-button [nzValue]="taskStateSearchEnum.Processing">
            <span>进行中</span>
          </label>
          <label nz-radio-button [nzValue]="taskStateSearchEnum.Complete">
            <span>已完成</span>
          </label>
          <label nz-radio-button [nzValue]="taskStateSearchEnum.Overdue">
            <span>已逾期</span>
          </label>
        </nz-radio-group>
        <nz-radio-group class="m-r-15" [ngModel]="taskCheckPeriodState">
          <label nz-radio-button [nzValue]="taskCheckPeriodStateEnum.All">
            <span>全部</span>
          </label>
          <label nz-radio-button [nzValue]="taskCheckPeriodStateEnum.DayCheck">
            <span>日检</span>
          </label>
          <label nz-radio-button [nzValue]="taskCheckPeriodStateEnum.MonthCheck">
            <span>月检</span>
          </label>
          <label nz-radio-button [nzValue]="taskCheckPeriodStateEnum.QuarterlyCheck">
            <span>季检</span>
          </label>
          <label nz-radio-button [nzValue]="taskCheckPeriodStateEnum.YearCheck">
            <span>年检</span>
          </label>
        </nz-radio-group>
        <nz-input-group nzSuffixIcon="search" style="width: 200px">
          <input type="text" name="q" nz-input placeholder="请输入" />
        </nz-input-group>
      </div>
    </div>

    <button class="m-b-8 m-t-20" nz-button nzBlock [nzType]="'dashed'" (click)="add()">
      <i nz-icon nzType="plus"></i>
      <span>添加</span>
    </button>

    <nz-list [nzDataSource]="showTaskList" [nzLoading]="loading" [nzPagination]="pagination" [nzRenderItem]="item">
      <ng-template #item let-item>
        <nz-list-item [nzActions]="[edit, op]" [nzContent]="nzContent">
          <ng-template #edit>
            <a class="operate-text" nz-typography>完成</a>
          </ng-template>
          <ng-template #op>
            <a class="ant-dropdown-link operate-text" nz-dropdown nz-typography [nzDropdownMenu]="opMenu">
              更多
              <i nz-icon nzType="down"></i>
            </a>
            <nz-dropdown-menu #opMenu="nzDropdownMenu">
              <ul nz-menu>
                <li nz-menu-item>编辑</li>
                <li nz-menu-item>删除</li>
              </ul>
            </nz-dropdown-menu>
          </ng-template>
          <nz-list-item-meta [nzDescription]="item.taskDesc" [nzTitle]="nzTitle">
            <ng-template #nzTitle>
              <a class="sp-18 m-r-8" href="{{ item.href }}" target="_blank">{{ item.taskName }}</a>
              <nz-tag [nzColor]="'blue'">标记</nz-tag>
            </ng-template>
          </nz-list-item-meta>
          <ng-template #nzContent>
            <div style="width: 280px">
              <div style="display: flex; color: #8c8c8c">
                <div style="flex: 1">
                  执行人
                  <p nz-typography nzEllipsis nzExpandable [attr.title]="item.userName" [nzEllipsisRows]="1" (nzOnEllipsis)="onEllipsisChange($event)">
                    {{ item.userName }}
                  </p>
                </div>
                <div class="text-right">
                  截止时间
                  <p>{{ item.endTime | date: 'yyyy-MM-dd' }}</p>
                </div>
              </div>
              <nz-progress [nzPercent]="item.finishRate" [nzStatus]="item.taskStateName" [nzStrokeWidth]="6"></nz-progress>
            </div>
          </ng-template>
        </nz-list-item>
      </ng-template>
      <ng-template #pagination>
        <nz-pagination
          nzShowQuickJumper
          nzShowSizeChanger
          [nzPageSize]="pageObj.pageSize"
          [nzPageSizeOptions]="[3, 5, 10, 20]"
          [nzTotal]="showAllTaskList.length"
          [(nzPageIndex)]="pageObj.pageIndex"
          (nzPageIndexChange)="getData($event)"
          (nzPageSizeChange)="pageSizeChange($event)"
        ></nz-pagination>
      </ng-template>
    </nz-list>
  </nz-card>
</div>
